<template>
<a-row style="height: 100%;width: 100%;">
  <a-col span="24" style="height: 100%">
   <p style="width: 98%;height: 4%; background-color: #D7D7D7;font-size: 18px;margin-left: 1%">输入参数</p>
    <div class="shu-ru-can-shu" style="height:65%;width: 98%;margin-left: 1%;box-shadow: 2px 2px 5px rgb(213, 213, 213);">
      <div class="left" style="width: 50%;height: 100%;display: inline-block;vertical-align: top;">
        <div class="left-all" style="height: 100%;width: 100%;display: flex">
          <div class="left-text" style="height: 100%;width: 50%">
            <ul class="left-li-1" style="height: 100%;width: 100%;">
              <li>轴承类型</li>
              <li>轴承内径(mm)</li>
              <li>轴承外径(mm)</li>
              <li>轴承转速(rpm)</li>
              <li>轴承轴向载荷(N)</li>
              <li>轴承径向载荷(N)</li>
              <li>当量静载荷P0(N)</li>
              <li>额定静载荷C0(N)</li>
            </ul>
          </div>
          <div style="height: 100%;width:50%">
            <ul class="left-li-2" style="height: 100%;width: 100%;">
              <li>
                <select @click="doit" id="s1id" v-model="params_50.bearing_type">
                <option id="s2id" value="1">其他轴承</option>
                <option id="s3id" value="2">承受轴向载荷的圆柱滚子轴承</option>
              </select>
              </li>
              <li><input v-model="params_50.d" /></li>
              <li><input v-model="params_50.D"  /></li>
              <li><input v-model="params_50.n" /></li>
              <li><input v-model="params_50.Fa" /></li>
              <li><input value="137664"/></li>
              <li><input value="137664" /></li>
              <li><input value="1680000" /></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="right" style="width: 50%;height: 100%;display: inline-block;">
        <div class="left-all" style="height: 100%;width: 100%;display: flex">
          <div class="left-text" style="height: 100%;width: 40%">
            <ul class="left-li-1" style="height: 100%;width: 100%;">
              <li>轴承型号</li>
              <li>摩擦力矩决定载荷P1(N)</li>
              <li>轴承摩擦力矩速度系数f0</li>
              <li>轴承摩擦力矩载荷系数f1</li>
                <li v-show="params_50.bearing_type==2">圆柱滚子轴承轴向摩擦系数f2</li>
              <li>润滑粘度输入方式</li>
                <li v-show="params_50.pp2==1">润滑油工作粘度(mm2/s)</li>
                <li v-show="params_50.pp2==2">润滑油40*C运动粘度(mm2/s)</li>
                <li v-show="params_50.pp2==2">润滑油100*C运动粘度(mm2/s)</li>
              <li>润滑油工作温度(*C)</li>
            </ul>
          </div>
          <div style="height: 100%;width:60%">
            <ul class="right-li-2" style="height: 100%;width: 100%;">
              <li><input  value="32048X" /></li>
              <li><input v-model="params_50.P1" /></li>
              <li><input v-model="params_50.f0" /></li>
              <li ><input v-model="params_50.f1" /></li>
                <li v-show="params_50.bearing_type==2"><input  v-model="params_50.f2"  /></li>
              <li>
                <select v-model="params_50.pp2" @click="doshow" >
                  <option value="1" >手动输入</option>
                  <option value="2" >自动计算</option>
                </select>
              </li>
                <li v-show="params_50.pp2==1"><input v-model="params_50.vis_work" value="0" /></li>
                <li v-show="params_50.pp2==2"><input  v-model="params_50.v40" /></li>
                <li v-show="params_50.pp2==2"><input v-model="params_50.v100" /></li>
              <li><input v-model="params_50.oper_temp" /></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 10%;width: 100%">
      <button style="height: 40%;width: 10%;font-size: 18px;margin-left: 70%;margin-top: 1%"  @click="tclick">计算</button>
    </div>

    <p style="height: 4%;width: 98%;margin-left: 1%;background-color: #D7D7D7;font-size: 18px">输出参数</p>
    <div class="shu-chu-can-shu" style="width: 100%;height: 15%;box-shadow: 2px 2px 5px rgb(213, 213, 213);">
      <div style="height: 100%;width: 98%;margin-left: 1%;display: flex;font-size: 16px;">
        <div style="height: 50%;width: 45%;display: inline-block;vertical-align: top;font-size: 16px;text-align: right;margin-top: 2%">轴承总功率损失</div>
        <div style="display: inline-block;height: 50%;width: 20%;font-size: 16px;text-align: center;margin-top: 2%">{{dataSource.result}}</div>
      </div>
    </div>

  </a-col>
</a-row>
  
</template>

<script>
import {bearing_power_loss} from "@/api/file";

export default {
  created() {
    document.title='轴承功率损失'
    this.$store.state.file.key = 50 //设置key为自己的页面编号
  },
  name: "bearing_power_loss",
  title:"轴承功率损失",

  data(){
    return{
      Sshow:false,
      Selectshow:false,
      Selectshow2:true,
      params_50:this.$store.state.file.dataList[50],

      dataSource:{
        result:"static text"
      },
    };
  },
  methods:{
    tclick()
    {
      // eslint-disable-next-line no-undef
      bearing_power_loss(this.params_50)
          .then( res =>{
            console.log(res);
            // if(res.code==200){
            //console.log(res);
            this.dataSource.result=res[0];
            // }
          })
          .catch(error =>{
            console.log(error);
          });
    },
    doit(){
      console.log(document.getElementById('s1id') .value)
      console.log(document.getElementById('s1id') .value == 2)
      if( document.getElementById('s1id') .value == 2 ) {
        this.Sshow = true;
      }
      else {
        this.Sshow = false;
      }

    },
    doshow(){
      console.log(document.getElementById('select1') .value)
      console.log(document.getElementById('select1') .value == 2)
      if( document.getElementById('select1') .value == 2 ) {
        this.Selectshow = true;
        this.Selectshow2=false;
      }
      else {
        this.Selectshow = false;
        this.Selectshow2=true;
      }

    }

  }
};
</script>

<style scoped>
.left-li-1 li{
  height: 10%;
  width: 100%;
  text-align: right;
  font-size: 16px;
}
.left-li-2 li{
  height: 10%;
  width: 100%;
  text-align: left;
  margin-left: 10%;
  font-size: 16px;
}
.left-li-2 input,select{
  height: 70%;
  width: 50%;
}
.right-li-2 li{
  height: 10%;
  width: 100%;
  text-align: left;
  margin-left: 10%;
  font-size: 16px;
}
.right-li-2 input,select{
  height: 60%;
  width: 40%;

}
</style>